<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" type="text/css" href="layui/css/layui.css"/>
    <script src="jquery-2.1.4.js" type="text/javascript" charset="utf-8"></script>
    <script src="layui/layui.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
    <button onclick="onOpenType0()">0（信息框，默认）</button>
    <button onclick="onOpenType1()">1（页面层）</button>
    <button onclick="onOpenType2()">2（iframe层 可以嵌套一个网页）</button>
    <button onclick="onOpenType3()">3（加载层）</button>
    <button onclick="onOpenType4()" id="tip">4（tips层）</button>

    <div id="divId" style="display: none">
        用户名：<input type="text"><br>
        密码：<input type="text"><br>
    </div>
    <script>
        /*var layer = {
            open: function() {

            }
        }*/
        function onOpenType0() {
            layer.open({
                type: 0,
                content: '弹出的内容'
            });
        }

        function onOpenType1() {
            //页面层
            layer.open({
                type: 1,
                area: ['420px', '240px'], // 宽高
                //content: '<div style="padding: 11px;">任意 HTML 内容</div>'
                content: $('#divId')
            });
        }

        function onOpenType2() {
            //iframe
            layer.open({
                type: 2,
                title: 'iframe test',
                shadeClose: true, // 点击遮罩区域，关闭弹层
                shade: 0.8, // 遮罩透明度
                area: ['380px', '80%'],
                content: 'layer1.html' // iframe 的 url
            });
        }

        function onOpenType3() {
            layer.open({
                type: 3
            });
        }

        function onOpenType4() {
            layer.open({
                type: 4,
                content: ['一个 tips 层', '#tip']
            });
        }
    </script>
</body>

</html>